<template>
	<div class="customizeAcknowledgment" v-if="data.bool">
		<div class="customizeAcknowledgmentBox">
			<div class="left">
				<image
					:src="data.httpUrl+'/app/file/viewFile?fileId='+(data.info.appVpsDemand.attachmentIds.split(',')[0])"
					mode="aspectFill"></image>
			</div>
			<div class="right">
				{{data.info.appVpsDemand.title}}
				<p class="price">
					{{data.info.appVpsDemand.price}}{{data.info.appVpsDemand.pricingUnit?'/'+data.info.appVpsDemand.pricingUnit:''}}<span>{{data.info.appVpsDemand.number}}{{data.info.appVpsDemand.pricingUnit}}</span>
				</p>
			</div>
			<p @click="submit" class="sending">发送订单</p>
		</div>
	</div>
</template>

<script setup lang="ts">
	import { reactive } from 'vue';
	import { TUIChatService } from "@tencentcloud/chat-uikit-engine";
	import TUIChatEngine, {
		TUITranslateService,
		TUIConversationService,
		TUIStore,
		StoreName,
		IMessageModel,
		IConversationModel,
	} from '@tencentcloud/chat-uikit-engine';
	import { queryVpsOrderItem } from '@/utils/api/map'
	interface IProps {
		messageConfig : any;
	}
	const props = withDefaults(defineProps<IProps>(), {
		messageConfig: {},
	});
	const data = reactive({
		bool:true,
		info: { appVpsDemand: {} },
		httpUrl: getApp().globalData.baseUrl,
	})
	setTimeout(()=>{
		data.bool = false;
	},5000)
	queryVpsOrderItem({ data: { id: props.messageConfig.messageId } }).then((res) => {
		data.info = res.data;
	})
	const submit = () => {
		data.bool = false;
		let promise = TUIChatService.sendCustomMessage({
			payload: {
				data: JSON.stringify({
					businessID: "demand",
					id: props.messageConfig.messageId,
					price: data.info.appVpsDemand.price,
					pricingUnit: data.info.appVpsDemand.pricingUnit,
					number: data.info.appVpsDemand.number,
					title: data.info.appVpsDemand.title,
					path: `/pages/requirementDetails1/index?id=${props.messageConfig.messageId}`,
					imageUrl: `${getApp().globalData.baseUrl}/app/file/viewFile?fileId=${data.info.appVpsDemand.attachmentIds.split(',')[0]}`,
				}),
				description: "",
				extension: ""
			},
			to: props.messageConfig.userId,
			conversationType: TUIChatEngine.TYPES.CONV_C2C // 确认传入的会话类型  
		});
		promise.catch((error) => {
			// 调用异常时业务侧可以通过 promise.catch 捕获异常进行错误处理
		});
	}
	console.log(props.messageConfig)
</script>

<style lang="scss">
	.customizeAcknowledgment {
		position: absolute;
		left: 0;
		right: 0;
		top: -140rpx;
		z-index: 99;

		.customizeAcknowledgmentBox {
			position: relative;
			display: flex;
			align-items: center;
			width: 100%;
			background-color: #fff;
			margin: 0 auto;

			.sending {
				position: absolute;
				right: 0;
				bottom: 0;
				font-size: 28rpx;
				padding: 5rpx 15rpx;
				border-radius: 20rpx;
				background-color: #E4E2FC;
				color: #6B64D3;
			}

			.left {
				width: 100rpx;
				height: 100rpx;
				border-radius: 16rpx;
				background: #ccc;
				margin-right: 30rpx;

				image {
					width: 100%;
					border-radius: 16rpx;
					height: 100%;
				}
			}

			.right {
				.price {
					display: flex;
					align-items: center;
					font-size: 32rpx;
					color: #6B64D3;
					margin-top: 10rpx;

					span {
						width: 70rpx;
						line-height: 48rpx;
						text-align: center;
						border-radius: 8rpx;
						background: #E4E2FC;
						color: #6B64D3;
						font-size: 24rpx;
						margin-left: 12rpx;
					}
				}
			}
		}
	}
</style>